var categoryList = [],
	categoryTagSelect = 0,
	tag = 'category_tag_',
	tag_list = 'category_list_',
	brandList = [],
	brandId = '',
	priceList = [],
	priceId = '',
	colorList = [],
	colorId = '';

$(() => {
	categoryList = getCategoryList();
	initCategory();
	initSearch();
	initCategoryListener();
})

initSearch = () => {
	queryBrandList(res => {
		brandList = res;
		handleOption(res, 'brand', 'brands');
	});
	queryRangPrice(res => {
		priceList = res;
		handleOption(res, 'price', 'prices');
	});
	queryRangColors(res => {
		colorList = res;
		handleOption(res, 'color', 'colors');
	});
}

handleOption = (mlist, name, displayId) => {
	let itemHtml = `<ul>`;
	$(`#${displayId}`).html('');

	mlist.forEach((item, j) => {
		let id = item.id;

		itemHtml +=
			`<li>
				<input type="radio" name="${name}" class="radio_input" id="${id}" value="${id}" data-text="${item.name}" onchange="onSearchRadioChange(this)">
				<label for="${id}" class="radio_box">${item.name}</label>
			</li>`;

	})
	itemHtml += `</ul>`;
	$(`#${displayId}`).html(itemHtml);
}

onSearchRadioChange = (e) => {
	let name = e.name;
	let id = e.id;
	let text = e.dataset.text;
	if (name == 'brand') {
		brandId = id;
		$("#brands").toggle('slow');
		$("#brand_name").val(text);
	} else if (name == 'price') {
		priceId = id;
		$("#prices").toggle('slow');
		$("#price_name").val(text);
	} else if (name == 'color') {
		colorId = id;
		$("#colors").toggle('slow');
		$("#color_name").val(text);
	}
}

initCategoryListener = () => {
	$("#shaixuan").on('click', () => {
		$('#panel').animate({
			width: 'toggle'
		}, 250);
	});
	$("#pick_brand").on('click', (e) => {
		let ele = $(e.currentTarget).parent();
		let option = $(ele.children()[1]);
		option.slideToggle("slow");
	});
	$("#pick_price").on('click', (e) => {
		let ele = $(e.currentTarget).parent();
		let option = $(ele.children()[1]);
		option.slideToggle("slow");
	});
	$("#pick_color").on('click', (e) => {
		let ele = $(e.currentTarget).parent();
		let option = $(ele.children()[1]);
		option.slideToggle("slow");
	});
	//使用JavaScript实现事件委托
	$("#option_btn").on('click', (e) => {
		if (e.target.tagName == 'BUTTON') {
			let clickName = e.target.textContent;
			if (clickName == '关闭') {
				$("#panel").toggle('slow');
			} else if (clickName == '重置') {
				brandId = '';
				$("#brand_name").val('');
				$('input[name="brand"]:checked').val();
				$('input:radio[name=brand]').prop('checked', false);
				priceId = '';
				$("#price_name").val('');
				$('input[name="price"]:checked').val();
				$('input:radio[name=price]').prop('checked', false);
				colorId = '';
				$("#color_name").val('');
				$('input[name="color"]:checked').val();
				$('input:radio[name=color]').prop('checked', false);
			} else if (clickName == '确定') {
				$("#panel").toggle();
				initCategory();
			}
		}
	});
	// $('input[name="brand"]').click(function(e){
	// 	console.log(e)
	//         var value = $('input[name="brand"]:checked').val();
	// 		console.log(value)
	//     });

}

initCategory = () => {
	setLoadingState('load_layout_category', 'loading_category', 'state_img_category', 'state_text_category', 0);
	$("#category_container").hide();
	setTimeout(() => {
		setLoadingState('load_layout_category', 'loading_category', 'state_img_category',
			'state_text_category', -1);
		$("#category_container").show();
		$("#category_tag").html('');
		$("#category_list").html('');
		let categoryTagHtml = ``,
			categoryListHtml = ``;

		categoryList.forEach((e, i) => {

			let code = e.groupId;

			categoryTagHtml += `<input type="radio" class="category_tab_input" id="${code}" ${categoryTagSelect == i ?'checked':''} readonly name="categoryTag" 
									onchange="onCategoryRadioChange(this)" />
								<label for="${code}">
									<div class="category_left_child">${e.name}</div>
								</label>`;

			let list = e.children;
			if (!ArrayEmpty(list)) {
				let listItemId = tag_list + code;
				list.forEach((item, j) => {
					let childName = item.name;

					categoryListHtml +=
						`<div class="category_section" id="${listItemId}">${childName}</div>`;

					let children = item.children;
					if (!ArrayEmpty(children)) {
						categoryListHtml += `<div class="category_list">`;
						children.forEach((citem, k) => {
							categoryListHtml += `<div class="category_list_item" onclick="getCategoryItem('${toObjectStr(citem)}')">
													<img src="${citem.thumbnail}" class="cimg"/>
													<span>${citem.name}</span>
												</div>`
						})
						categoryListHtml += `</div>`
					}
				})
				categoryListHtml += `</div>`;
			}

		})
		$("#category_tag").html(categoryTagHtml);
		$("#category_list").html(categoryListHtml);
	}, 500)

}

onCategoryRadioChange = (e) => {
	let id = tag_list + e.id;
	var scrollTo = $(`#${id}`);
	scrollLocation(scrollTo)
}

scrollLocation = (scrollTo) => {
	let father = $('.category_content');
	father.animate({
		scrollTop: scrollTo.offset().top - father.offset().top + father.scrollTop()
	}, 500);
};

getCategoryItem = (e) => {
	navigateTo(`page/goods/detail.html`)
}
